<template>
  <div class="edit">
    <div class="header">
      <top-bar style="color:#000" :barObj="barObj"></top-bar>
    </div>
    <div class="content">
      <div class="boxInput">
        <mt-field
          style="font-size:13px;"
          :attr="{ maxlength: 10,type:'Number', placeholder:'红包金额(PS)'}"
          v-model="ps"
        ></mt-field>
      </div>
      <p></p>
      <div class="boxInput">
        <mt-field
          style="font-size:13px;"
          label
          :attr="{ maxlength: 10,type:'Number', placeholder:'红包个数(个)'}"
          v-model="count"
        ></mt-field>
      </div>
      <p>手续费3%</p>
      <div class="boxInput boxInput1">
        <mt-field style="font-size:13px;" v-model="introduction" type="textarea" rows="4"></mt-field>
      </div>
      <div class="psBox">
        <p>
          <span>PS</span>
          {{ps}}
        </p>
        <div class="btn btn1" v-if="!money">塞进红包</div>
        <div class="btn btn2" v-else @click="isPayMask=true">塞进红包</div>
      </div>
    </div>

    <div class="payMask" v-if="isPayMask">
      <div class="mian">
        <div class="title">
          <i @click="isPayMask=false" class="iconfont icon-guanbi"></i> 请输入支付密码
        </div>
        <div class="content">
          <div class="p">章鱼红包</div>
          <div class="txt">
            <span class="ps">PS</span>
            {{ps}}
          </div>
        </div>
        <div class="inputBox inputBox1" ref="inputBox">
          <mt-field
            style="border:1px solid #989797;width:100%"
            type="password"
            :attr="{ maxlength: 6 }"
            v-model="passwordVal"
          ></mt-field>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";

import { hex_md5 } from "../../../utils/md5.js";
import { sendredPacket } from "../../../api.js";
import { send } from "../../../im";
import { getGuid } from "../../../utils/index";
import { getEvent } from "../../../im";
import { Toast } from "mint-ui";
export default {
  name: "edit",
  data() {
    getEvent(data => {
      this.Event = data;
    });
    return {
      barObj: {
        isBack: true,
        backVal: "取消",
        title: "发红包",
        isIcon: true
      },
      ps: "",
      count: "",
      introduction: "恭喜发财, 大吉大利",
      isPayMask: false,
      passwordVal: ""
    };
  },
  components: {
    topBar
  },
  mounted() {
    getEvent(data => {
      this.Event = data;
    });
  },
  computed: {
    money() {
      return this.ps > 0 ? true : false;
    }
  },
  watch: {
    passwordVal(v1, v2) {
      if (v1.length < 6) {
        return;
      }
      var self = this;
      this.target = self.$route.query.target;
      sendredPacket({
        money: this.ps,
        nums: this.count,
        title: this.introduction,
        token: localStorage.realToken,
        password: hex_md5(this.passwordVal),
        version: "H3.0.0",
        machine_id: getGuid()
      }).then(res => {
        if (res.data.code == 200) {
          let targetCode = "#redPacket" + "#" + res.data.data.packet_id;
          send(self.target, targetCode, "text", (error, msg) => {
            var data = {};
            data.type = "redPacket";
            data.flow = "out";
            data.text = targetCode;
            data.target = self.target;
            data.code = res.data.data.packet_id;
            //self.Event.$emit("onMsg", data);
          });
        } else {
          Toast({
            message: res.data.msg,
            duration: 2000
          });
          return;
        }
      });
      if (v1.length >= 6) {
        this.isPayMask = false;
        this.$router.back();
        //this.$router.go(-1);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.edit {
  width: 7.5rem;
  margin: 0 auto;

  .header {
    padding-top: 0.54rem;
    box-sizing: border-box;
    height: 1.5rem;
  }

  .payMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;

    .mian {
      width: 7.04rem;
      height: 7.1rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        width: 6.67rem;
        line-height: 1.08rem;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        margin: 0 auto;
        font-size: 16px;
        font-weight: 500;

        i {
          float: left;
        }
      }

      .content {
        width: 6.63rem;
        height: 3rem;
        margin: 0.5rem auto;
        border-bottom: 1px solid rgba(137, 137, 137, 1);
        text-align: center;
        box-sizing: border-box;
        padding-top: 0.5rem;

        .p {
          margin: 0.3rem auto;
          font-size: 14px;
        }

        .txt {
          font-weight: 500;

          .ps {
            font-size: 30px;
            display: inline-block;
            position: relative;
            bottom: 5px;
          }

          span {
            font-size: 40px;
          }
        }
      }

      .inputBox {
        width: 6.32rem;
        height: 0.93rem;
        display: flex;
        margin: 0.07rem auto;

        input {
          width: 1.03rem;
          flex: 1;
          border: 1px solid rgba(203, 203, 203, 1);
          text-align: center;
        }
      }

      .inputBox1 {
        input {
          width: 100%;
          text-align: left;
          letter-spacing: 0.81rem;
          padding-left: 0.5rem;
        }
      }
    }
  }

  .content {
    width: 6.9rem;
    margin: 0 auto;

    .boxInput {
      height: 0.91rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.1rem;
      overflow: hidden;
      font-size: 13px;
    }

    .boxInput1 {
      height: 1.15rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.1rem;
      overflow: hidden;
      font-size: 13px;
      margin-bottom: 2rem;
    }

    .psBox {
      text-align: center;

      p {
        font-size: 35px;

        span {
          font-size: 26px;
          position: relative;
          bottom: 10px;
          left: -5px;
        }
      }

      .btn {
        width: 5.44rem;
        height: 0.82rem;
        line-height: 0.82rem;
        border-radius: 0.1rem;
        margin: 0 auto;
        color: rgba(239, 239, 239, 1);
      }

      .btn1 {
        background: rgba(232, 194, 185, 1);
      }

      .btn2 {
        background: rgba(234, 94, 58, 1);
      }
    }

    p {
      margin: 5px auto;
      font-size: 10px;
    }
  }
}
</style>

